<template>
	<view class="">
		<view class="cenTenst">
			<view class="rechgrgeCz">充值金额</view>
			<view class="rechgrgeIpt">
				<text>￥</text>
				<input type="number" value="sss"/>
			</view>
		</view>
		<view class="typecadr" @click="pecadr">
			<view class="cardXz">
				<view class="cardKlx">选择银行卡</view>
				<view class="cardZsyh">{{banksr.name}}</view>
			</view>
			<view class="iconfont icon-icon"></view>
		</view>
		<view class="binding" @click="payFlag=true">
			立即充值
		</view>
		
		<!-- 以下是该组件使用的全部属性 -->
		<best-payment-password :show="payFlag" :value="paymentPwd" digits="6" @submit="checkPwd" @cancel="togglePayment"></best-payment-password>
	</view>
</template>

<script>
	 //引入组件文件
    import bestPaymentPassword from '../../../components/best-payment-password/best-payment-password.vue'

    //声明组件
    export default {
        components:{
            bestPaymentPassword
        },
		data:function(){
			return {
				payFlag:false,
				paymentPwd:'',
				banksr:{
					name:'招商银行 储蓄卡'
				}
			}
		},
			
		methods:{
			togglePayment(){
				this.payFlag = false
			},
			pecadr(){
				uni.navigateTo({
					url:'../cankcard/choice'
				})
			}
		}
    }
</script>

<style>
	page{
		background: #f1f1f1;
	}
	.digital-keyboard-modal .num{
		height: 130upx !important;
		line-height: 130upx !important;
	}
	.digital-keyboard-modal .pwd-box{
		margin:40upx 0upx ;
	}
	.typecadr{
		display: flex;
		justify-content: space-between;
		padding: 20upx 3%;
		background: #fff;
		margin-top: 20upx;
	}
	.cardXz{
		display: flex;
	}
	.cardKlx{
		font-size: 32upx;
		color: #333;
		width: 200upx;
	}
	.cardZsyh{
		font-size: 32upx;
		color: #13b1eb;
	}
	.icon-icon{
		font-size: 30upx;
		color: #777;
		margin-top: 6upx;
	}
	.binding{
		width: 94%;
		font-size: 34upx;
		height: 80upx;
		color: #fff;
		line-height: 80upx;
		text-align: center;
		background: #13b1eb;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 8upx;
	}
	.cenTenst{
		width: 94%;
		padding: 10upx 3% 30upx 3%;
		background: #fff;
	}
	.rechgrgeCz{
		color: #333333;
		font-size: 32upx;
	}
	.rechgrgeIpt text{
		font-size: 60upx;
		color: #333;
		line-height: 1.3;
	}
	.rechgrgeIpt input{
		font-size: 50upx;
		color: #333;
		font-weight: bold;
		width: 80%;
		margin-top: 18upx;
	}
	.rechgrgeIpt{
		display: flex;
		margin-top: 20upx;
	}
</style>
